<template>
    <div id="app">
        <MoTable
            :data="tableData"
            :attrs="tableAttrs"
            :cols="cols"
            :events="tableEvents"
            :paging="pagination.attrs"
            :pagingEvents="pagination.events"
        />
    </div>
</template>
<script>
import MoTable from "./MoTable";
export default {
    name: "App",
    components: {
        MoTable
    },
    data() {
        return {
            tableData: [
                {
                    date: "2020-03-27",
                    name: "老村长",
                    address: "四川省成都市青羊区人民中路一段16号"
                },
                {
                    date: "2020-03-27",
                    name: "老村长",
                    address: "四川省成都市青羊区人民中路一段16号"
                },
                {
                    date: "2020-03-27",
                    name: "老村长",
                    address: "四川省成都市青羊区人民中路一段16号"
                },
                {
                    date: "2020-03-27",
                    name: "老村长",
                    address: "四川省成都市青羊区人民中路一段16号"
                }
            ],
            pagination: {
                attrs: {
                    currentPage: 1,
                    pageSizes: [10, 20, 30],
                    pageSize: 0,
                    layout: "total, sizes, prev, pager, next, jumper",
                    total: 4
                },
                events: {
                    sizeChange: () => {},
                    currentChange: () => {}
                }
            },
            tableAttrs: {
                stripe: true,
                border: true,
                "show-header": true
            },
            tableEvents: {
                "row-click": (row, column, event) => {
                    // console.log(row);
                    // console.log(column);
                    // console.log(event);
                }
            },
            cols: [
                {
                    align: "center",
                    type: "index"
                },
                {
                    align: "center",
                    type: "selection"
                },
                { prop: "date", label: "日期", width: "180" },
                { prop: "name", label: "姓名", width: "180" },
                { prop: "address", label: "地址" },
                {
                    label: "操作",
                    align: "center",
                    width: "140",
                    scopedSlots: {
                        default: scoped => {
                            return (
                                <el-button
                                    onClick={() =>
                                        this.handlerEditor(scoped.row)
                                    }
                                    type="primary"
                                    plain
                                    size="small"
                                    icon="el-icon-edit"
                                >
                                    Editor
                                </el-button>
                            );
                        }
                    }
                }
            ]
        };
    },
    methods: {
        handlerEditor(row) {
            console.log(row);
        }
    }
};
</script>
